<template>
  <div class="nav" :class="!sidebar?'nav-w':'nav-w1'">

    <el-menu
      default-active="2"
      class="el-menu-vertical-demo mynv"
      background-color="#102439"
      text-color="#fff"
      :router="true"
      :collapse="sidebar"
    >
      <el-submenu v-for="item in routes" v-show="item.meta.type == type || type == 1" :key="item.path" :index="item.path">
        <template slot="title">
          <i class="iconfont" :class="item.meta.icon"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <el-menu-item
          v-for="i in item.children"
          :index="item.path + '/' + i.path"
          :key="item.path + '/' + i.path"
          >{{ i.meta.title }}</el-menu-item
        >
      </el-submenu>
      
    </el-menu>
    
  </div>
</template>

<script>
//引入 vuex 工具方法
import {mapGetters} from 'vuex';

export default {
  name: "SideBar",
  created() {
    //获取路由数据，重组，保存到 本地变量
    let routes = [];
    this.$router.options.routes.forEach((item) => {
      if (item.meta) {
        routes.push(item);
      }
    });

    this.routes = routes;
    console.log('routes:',routes);
  },
  computed: {
   ...mapGetters(["sidebar",'type']),

  },
  data() {
    return {
      routes: [],
    };
  },
};
</script>

<style scoped lang="scss">
.el-menu{
  border-right: none;
}

.nav-w{
  min-width: 167px !important;
  max-width: 167px !important;
}

.nav-w1{
  min-width: 64px !important; 
  max-width: 64px !important;
}
.nav {
  position: relative;
  height: 100%;
  background-color: rgb(16, 36, 57);
  overflow: hidden;

  .iconfont {
    font-size: 20px;
    margin-right: 10px;
  }
  .menu {
    color: white;
    font: 30px;
    position: absolute;
    bottom: 30px;
    left: 30px;
  }
}
</style>